<template>
	<view>
		<view class="suggest-model">
			<view class="suggest-model-part">
				<view class="suggest-model-part-title-top">
					<view class="suggest-model-part-title">
							<slot class="suggest-model-part-title-text" name="title"></slot>
					</view>
					<view class="suggest-model-part-icon" @click="CloseModel()">
						<image src="../../pagesA/static/suggest/close.png" style="width: 64rpx;height: 64rpx;"></image>
					</view>
				</view>

				<view class="suggest-tips">
					<view class="suggest-tips-part">
						<!-- <text style="font-size: 26rpx;">1.阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴</text> -->
						<slot name="list1"></slot>
					</view>
					<view class="suggest-tips-part">
						<!-- <text style="font-size: 26rpx;">2.阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴</text> -->
						<slot name="list2"></slot>
					</view>
					<view class="suggest-tips-part">
						<!-- <text style="font-size: 26rpx;">3.阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴</text> -->
						<slot name="list3"></slot>
					</view>
<!-- 					<view class="suggest-tips-part">
						<text style="font-size: 26rpx;">3.阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴</text>
					</view> -->
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			mymodel:Boolean,
			scrollTop:"",
		},
		data() {
			return {
				// ShowModel:false,
				model:Boolean,
				scroll:Number
			}
		},
		watch:{
			mymodel(e){
				this.model = e
				console.log(e)
			},
			scrollTop(e) {
				this.scroll = e
				console.log(e)
			}
		},
		methods: {
			CloseModel(){
				this.$emit('mymodelEvent', false);
			}
			
			
		},
	}
</script>

<style>
	.suggest-model {
		width: 100%;
		height: 100%;
		z-index: 99;
		background-color: rgba(125, 125,125, 0.3);
		position: fixed;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		touch-action: none;
	}
		
	.suggest-model-part-title-top{
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
	}
	.suggest-model-part{
		width: 80%;
/* 		height: 520rpx; */
		background-color: white;
		border-radius: 24rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.suggest-model-part-title{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 90rpx;
	}
	.suggest-model-part-title-text{
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100% - 90rpx);
		height: 100%;
	}
	.suggest-model-part-icon{
		width: 20%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.suggest-tips{
		width: 100%;
/* 		height: 80%; */
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.suggest-tips-part{
		width: 80%;
/* 		height: 80rpx; */
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}
</style>
